<template>
	<view>
		<s-layout 
		tabbar="/pages/new/index" 
		navbar="custom">
		<!-- 标题栏 -->
		<newNavbar />
		<!-- 顶部背景 -->
		<view class="TopBg">
			<!-- 定位和搜索框 -->
			<view class="TopArea" :style="[{paddingTop:(sys_navBar - sys_statusBar)*2 + 'px'}]">
				<view class="adress">
					<image :src="sheep.$url.static('/uploads/20240812/8006b04c2de3502b0989c8c74f44db82.png')" mode=""></image>
					<text>{{state.Adress}}</text>
				</view>
				<view class="input">
					<image :src="sheep.$url.static('/uploads/20240812/4cace17bc77447b102d2965bb625e46c.png')" mode=""></image>
					<text>会计代理记账</text>
				</view>
			</view>
		</view>
		<!-- 金刚区 -->
		<view class="District">
			<view class="rict" v-for="(item,index) in state.DistrictList" :key="index">
				<view class="arrowList">
					<image :src="item.icon" class="img"  mode=""></image>
					<image :src="sheep.$url.static('/uploads/20240812/516e64d3ca6dbf848ed73167738fe371.png')" mode="" class="arrow" :class="state.arrows[index]" v-if="index != state.DistrictList.length -1"></image>
				</view>
				<view class="arrow-text">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 交易快报 -->
		<view class="bulletin">
			<view class="tin"></view>
			<image :src="sheep.$url.static('/uploads/20240812/2c17d5d51cce8d4eab455f0ef353caea.png')" class="TinImg"  mode=""></image>
		    <!-- 交易快报 -->
		    <swiper class="tin-swiper" 
			 :indicator-dots="false"
			 autoplay="true"
		     :vertical="true" 
			 :disable-touch="true" 
			 :autoplay="true" 
			 :interval="2000" 
			 :circular="true">
		    	<swiper-item class="tin-swiper-item" v-for="(item, index) in state.tinList" :key="index">
		    		<view class="tin-title">
		    			{{item.title}}
		    		</view>
		    	</swiper-item>
		    </swiper>
		</view>
		<!-- 轮播 -->
		<view class="banner-css">
			<su-swiper
			  :list="state.BannerList"
			  imageMode="widthFix"
			  dotCur="bg-mask-45"
			  :seizeHeight="212"
			/>
		</view>
		<!-- 推荐服务 -->
		<view class="services">
			<view class="item-title-box">
				<image :src="sheep.$url.static('/uploads/20240813/fb514f6b4a23c5f163bb3c8a43530791.png')" mode="" class="item-title"></image>
			    <view class="more">
			    	<view class="text">
			    		更多服务
			    	</view>
			    	<text class="cicon-forward"></text>
			    </view>
			</view>
			<view class="vices">
				<scroll-view scroll-x="true" >
					<view class="toal">
						<view v-for="(item, index) in state.ServicesList" :key="index" class="list">
							<view class="item" :style="'background-image: url('+ item.recommend_image +')'">
								<text class="txt1">价格透明 优质服务</text>
								<text class="txt2">税务变更</text>
								<text class="txt3">专业会计团队代账</text>
								<text class="txt3">服务快捷无忧</text>
							</view>
							<view class="title">
								{{item.desc}}
							</view>
						</view>
					</view>	
					
				</scroll-view>
			</view>
		</view>
		<!-- 最新动态 -->
		<view class="services">
			<view class="item-title-box">
				<image :src="sheep.$url.static('/uploads/20240813/1e4c0bd25acb89730cb15cd9fe834678.png')" mode="" class="item-title"></image>
			    <view class="more">
			    	<view class="text">
			    		更多动态
			    	</view>
			    	<text class="cicon-forward"></text>
			    </view>
			</view>
			<view class="trends">
				<view class="shop-img">
					
				</view>
				<view class="describe">
					<text class="title">为什么很多人不愿意在银行做财务？</text>
					<text class="time">官方·2022-07-19 16:54</text>
				</view>
			</view>
			<view class="trends">
				<view class="shop-img">
					
				</view>
				<view class="describe">
					<text class="title">潜在的税务风险</text>
					<text class="time">官方·2021-04-28 07:46</text>
				</view>
			</view>
			<view class="trends">
				<view class="shop-img">
					
				</view>
				<view class="describe">
					<text class="title">税务局对公司各项费用规定</text>
					<text class="time">官方·2022-03-22 16:08</text>
				</view>
			</view>
		 </view>
		</s-layout>
	 </view>
</template>

<script setup>
	import { reactive, computed } from 'vue';
	import sheep from '@/sheep';
	import { onLoad, onPageScroll } from '@dcloudio/uni-app';
	import newNavbar from './components/new-navbar.vue';
	
	
	onPageScroll(() => {});
	onLoad(async () => {
		
	});
	const sys_statusBar = sheep.$platform.device.statusBarHeight;
	const sys_navBar = sheep.$platform.navbar;
	const topBg = sheep.$url.css('/uploads/20240812/eff0887376591b99a9836580e62b0fdd.png');
	
	const state = reactive({
		/* 定位信息 */
		Adress:'定位中~',
		/* 推荐服务数据 */
		ServicesList:[{
			recommend_image:sheep.$url.static('/uploads/20240813/0a89448af5ef059eb236df6f87937c6d.png'),
			desc:'代理记账首月仅需176元,全 年一千元起,不容错过！'
		},{
			recommend_image:sheep.$url.static('/uploads/20240813/0a89448af5ef059eb236df6f87937c6d.png'),
			desc:'代理记账首月仅需176元,全 年一千元起,不容错过！'
		},{
			recommend_image:sheep.$url.static('/uploads/20240813/0a89448af5ef059eb236df6f87937c6d.png'),
			desc:'代理记账首月仅需176元,全 年一千元起,不容错过！'
		}],
		/* 轮播数据 */
		BannerList:[{
			src:sheep.$url.static('/uploads/20240812/51f77dedea6eb38b3b029f7734075e7f.png'),
			type:'image'
		},{
			src:sheep.$url.static('/uploads/20240812/51f77dedea6eb38b3b029f7734075e7f.png'),
			type:'image'
		}],
		/* 交易快报数据 */
		tinList:[{
			title:'A焦太郎刚交易了软件开发服务'
		},{
			title:'微信用户刚交易了软件开发服务'
		},{
			title:'微信用户刚交易了银行代办'
		}],
		/* 金刚区数据 */
		arrows: [
			'arrow-right',
			'arrow-right',
			'arrow-right',
			'arrow-bottom',
			'arrow-bottom',
			'arrow-left',
			'arrow-left',
			'arrow-left',
			'arrow-right',
			'arrow-right',
			'arrow-right',
		],
		DistrictList:[{
			icon:sheep.$url.static('/uploads/20240812/a18ca0768d8300d24625d48224131da0.png'),
			title:'公司选址'
		},{
			icon:sheep.$url.static('/uploads/20240812/9deab975fac646185f6cb620d2899573.png'),
			title:'公司风水'
		},{
			icon:sheep.$url.static('/uploads/20240812/d9d78561ce403b1f47e71dcbb28b83d6.png'),
			title:'工商税务'
		},{
			icon:sheep.$url.static('/uploads/20240812/ef86817b43d60bba018f3639a8f5d9b8.png'),
			title:'软件开发'
		},{
			icon:sheep.$url.static('/uploads/20240812/394d20a74c9d0ce51845b2d95d88f844.png'),
			title:'招聘服务'
		},{
			icon:sheep.$url.static('/uploads/20240812/0262e2a81c67c9ba5a7e61f583236270.png'),
			title:'推广策划'
		},{
			icon:sheep.$url.static('/uploads/20240812/6fe120063902a96a0c4a30a64d84e09c.png'),
			title:'公司审计'
		},{
			icon:sheep.$url.static('/uploads/20240812/6122458078fac64eeb48bbe057ae9dd7.png'),
			title:'商标版权'
		},{
			icon:sheep.$url.static('/uploads/20240812/bbdddb25c0e465aa2dcd2a0f821bb406.png'),
			title:'法律服务'
		},{
			icon:sheep.$url.static('/uploads/20240812/eead6802a3e7eb99f13d003d2fa39620.png'),
			title:'设备租赁'
		},{
			icon:sheep.$url.static('/uploads/20240812/fdb6e7f68ec5ee4c105c57ef020cdc7f.png'),
			title:'员工培训'
		},{
			icon:sheep.$url.static('/uploads/20240812/3440c1254db0a4d3a4b4b1efccb7d787.png'),
			title:'全部更多'
		}]
	});
</script>

<style lang="scss">
.services{
	width: 100%;
	height: auto;
	background: #FFFFFF;
	margin-top: 14rpx;
	padding-bottom: 20rpx;
	.trends{
		display: flex;
		padding: 0 20rpx 40rpx 20rpx;
		.describe{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.time{
				font-family: SourceHanSansCN;
				font-weight: 400;
				font-size: 28rpx;
				color: #B3B3B3;
			}
			.title{
				font-family: SourceHanSansCN;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}
		.shop-img{
			width: 210rpx;
			height: 138rpx;
			background: #B4B3B3;
			border-radius: 20rpx;
			margin: 0 12rpx 0 0;
		}
	}
	.vices{
		.toal{
			width: 710rpx;
			display: flex;
			margin:auto;
			.list{
				display:flex;
				flex-direction: column;
				align-items: center;
				margin:0 0 0 20rpx;
				.title{
					padding: 6rpx 4rpx 0 4rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}
				.item{
					background-repeat: no-repeat;
					background-size: 100%;
					background-position: center;
					width: 360rpx;
					height: 240rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					.txt1{
						font-family: SourceHanSansCN;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF7200;
						padding: 22rpx 0 16rpx;
					}
					.txt2{
						font-family: SourceHanSansCN;
						font-weight: 800;
						font-size: 56rpx;
						color: #5143E9;
						font-style: italic;
						padding: 0 0 14rpx 0;
					}
					.txt3{
						font-family: SourceHanSansCN;
						font-weight: 400;
						font-size: 22rpx;
						color: #808080;
					}
				}
			}
			
		}	
	}
	.item-title-box{
		height: 82rpx;
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.more{
			text-align: right;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			width: 150rpx;
			height: 30rpx;
			line-height: 30rpx;
			display: flex;
			align-items: center;
			.cicon-forward{
				color:#666666;
			}
			.text{
				margin-right: 10rpx;
			}
		}
		.item-title{
			width: 145rpx;
			height: 70rpx;
			margin-left: 20rpx; 
		}
	}
}	
.banner-css{
	width: 710rpx;
	height: 212rpx;
	margin: auto;
}
.bulletin{
	width: 720rpx;
	height: 80rpx;
	display: flex;
	margin: 0 auto;
	position: relative;
	.tin-swiper{
		width: 529rpx;
		height: 40rpx;
		margin-left: 26rpx;
		margin-top: 16rpx;
		.tin-swiper-item{
			height: 100%;
			width: 100%;
			.tin-title{
				height: 30rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;
				white-space: nowrap;
			}
		}
	}
	.TinImg{
		position: absolute;
		top: -10rpx;
		width: 164rpx;
		height: 80rpx;
	}
	.tin{
		width: 145rpx;
		height: 80rpx;
		background: linear-gradient(to bottom , #00AEFF 0%, rgba(166, 255, 234, 0) 100%);
		opacity: 0.26;
		transform:skewX(-10deg);
	}
}	
.District{
	width: 696rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin: -80rpx auto 0;
	display: flex;
	flex-wrap: wrap;
	padding: 11rpx 15rpx 1rpx;
	text-align: center;
	white-space: nowrap;
	margin-bottom: 12rpx;
	position: relative;
	.rict{
		margin: 0 40rpx;
		width: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.arrow-text{
			height: 24rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #1A1A1A;
			line-height: 24rpx;
			margin: 7rpx 0 34rpx;
		}
		.arrowList{
			width: 90rpx;
			height: 90rpx;
			position: relative;
			.arrow {
				width: 35rpx;
				height: 17rpx;
				position: absolute;
				z-index: 1;
			}
			
			.arrow-right {
				top: 40rpx;
				right: -55rpx;
			}
			
			.arrow-left {
				top: 40rpx;
				left: -55rpx;
				transform: rotate(180deg);
			}
			
			.arrow-bottom {
				bottom: -60rpx;
				left: 30rpx;
				transform: rotate(90deg);
			}
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
}	
.TopArea{
	display: flex;
	padding: 0 20rpx;
	justify-content: space-between;
	.input{
		flex:3;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 26rpx;
			height: 26rpx;
		}
		text{
			padding: 0 0 0 10rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #808080;
		}
	}
	.adress{
		display: flex;
		flex:1;
		align-items: center;
		image{
			width: 22rpx;
			height: 26rpx;
		}
		text{
			padding: 0 0 0 8rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}
.TopBg{
	width: 100%;
	height: 344rpx;
	background-image: v-bind(topBg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
}
</style>
